<template>
  <div class="personal">
    <div class="box">
      <div class="wrap">
        <router-link to="/commodity">道聚城</router-link>
        <b>个人中心</b>
      </div>
      <div class="clearfix">
        <div class="comm_bd center_nav" id="center_nav">
          <dl>
            <dd>
              <router-link class="ban_link" to="/personal/rwu1" active-class="opa">
                <s  class="i_sp i_center" style="background-position: 0 -386px"></s>
                个人中心首页
              </router-link
              >
            </dd>
            <dd>
              <router-link class="ban_link current" to="/personal/rwu" active-class="opa">
                <s  class="i_sp i_privilege" style="background-position: -44px -542px"></s>
                我的特权
              </router-link
              >
            </dd>
             <dd>
              <router-link class="ban_link current" to="/personal/rwu2" active-class="opa">
                <s  class="i_sp i_task" style="background-position: -4px -570px"></s>
                我的任务
              </router-link>
            </dd>
            <dd>
              <router-link class="ban_link current" to="/personal/rwu3" active-class="opa">
                <s  class="i_sp i_task" style="background-position: -30px -386px"></s>
                我的订单
              </router-link
              >
            </dd>
             <dd>
              <router-link class="ban_link current" to="/personal/rwu4" active-class="opa">
                <s  class="i_sp i_issue" style="background-position: -78px -570px"></s>
                我的道聚城白条
              </router-link
              >
            </dd>
            <dd>
              <router-link class="ban_link current" to="/personal/rwu5" active-class="opa">
                <s  class="i_sp i_vip" style="background-position: -179px -570px"></s>
                道聚城体验会员
              </router-link
              >
            </dd>
            <dd>
              <router-link class="ban_link current" to="/personal/rwu6" active-class="opa">
                <s  class="i_sp i_reltrade" style="background-position: -180px -445px"></s>
                我的周边订单
              </router-link
              >
            </dd>
            <dd>
              <router-link class="ban_link current" to="/personal/rwu7" active-class="opa">
                <s  class="i_sp i_address" style="background-position: -180px -386px"></s>
                我的收货地址
              </router-link
              >
            </dd>
            <dd>
              <router-link class="ban_link current" to="/personal/rwu8" active-class="opa">
                <s  class="i_sp i_ticket"  style="background-position: -60px -386px"></s>
                我的购物点
              </router-link
              >
            </dd>
             <dd>
              <router-link class="ban_link current" to="/personal/rwu9" active-class="opa">
                <s class="i_sp i_coupon"  style="background-position: -90px -386px"></s>
                我的优惠券
              </router-link
              >
            </dd>
             <dd>
              <router-link class="ban_link current" to="/personal/rwu10" active-class="opa">
                <s  class="i_sp i_coin"  style="background-position: -120px -446px"></s>
                我的聚豆
              </router-link
              >
            </dd>
             <dd>
              <router-link class="ban_link current" to="/personal/rwu11" active-class="opa">
                <s   class="i_sp i_message"  style="background-position: -90px -416px"></s>
                我的消息
              </router-link
              >
            </dd>
            <dd>
              <router-link class="ban_link current" to="/personal/rwu12" active-class="opa">
                <s   class="i_sp i_attention"  style="background-position: -120px -386px"></s>
                我的关注
              </router-link
              >
            </dd>
            <dd>
              <router-link class="ban_link current" to="/personal/rwu13" active-class="opa">
                <s   class="i_sp i_prop"  style="background-position: -150px -386px"></s>
                我的功能性道具
              </router-link
              >
            </dd>
            <dd>
              <router-link class="ban_link current" to="/personal/rwu14" active-class="opa">
                <s   class="i_sp i_charm"  style="background-position: 0 -446px"></s>
                领取魅力值
              </router-link
              >
            </dd>
             <dd>
              <router-link class="ban_link current" to="/personal/rwu15" active-class="opa">
                <s  class="i_sp i_myticket"  style="background-position: -151px -446px"></s>
                我的票务
              </router-link
              >
            </dd>
          </dl>
        </div>
        <!-- 右侧内容 -->
        <div class="w950">
          <router-view></router-view>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'personal',
  methods: {

  }
}
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  background-image: url(@/assets/img/wrap_bg.png);
   .center_nav dd a:hover {
    text-decoration: none;
    border-left-color: #f74a4a;
    color: #f74a4a;
    }
    .opa {
      border-left-color: #f74a4a;
      color: #f74a4a;
    }
  .wrap {
    width: 1190px;
    height: 40px;
    line-height: 40px;
    margin-left: auto;
    margin-right: auto;
  }
  .clearfix {
    width: 1190px;
    // background-color: rgb(255, 255, 255);
    margin: 0 auto;
  }
  .comm_bd {
    width: 228px;

    background: #fff;
    float: left;
    dd {
      border-bottom: 1px solid #e6e9ef;
      a {
        display: block;
        height: 55px;
        line-height: 55px;
        font-size: 14px;
        border-left: 6px solid #fff;
        padding-left: 12px;
        text-decoration: none;
        s {
          float: left;
          width: 25px;
          height: 25px;
          margin: 14px 10px 0 0;
        }
        .i_sp {
          background: url(//js02.daoju.qq.com/common/images/icon.png) no-repeat;
        }
      }
    }
  }
  .btn_top {
    display: block;
    width: 30px;
    height: 30px;
    margin: 0 auto;
  }
  .w950 {
    width: 950px;
    float: right;
  }
}
</style>
